<template>
	<view>
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill">
		</image>
		<u-navbar title="合格名单" :autoBack="true" bgColor="transparent" :titleStyle="{ color: '#fff' }" safeAreaInsetTop
			placeholder leftIconColor="#fff"></u-navbar>

		<!-- 搜索与筛选 -->
		<view class="filter-box">
			<u-search placeholder="请输入机构名称/机构代码等" v-model="keyword"></u-search>
			<view class="row">
				<view class="row-item" @tap="showRegionPicker = true">
					<view class="label">行政区域</view>
					<view class="value">{{ query.region || '全部' }}</view>
				</view>
				<view class="row-item" @tap="showStatusPicker = true">
					<view class="label">状态</view>
					<view class="value">{{ statusText(query.checkStatus) }}</view>
				</view>
			</view>
			<view class="btn-row">
				<u-button type="primary" size="small" @click="handleSearch"
					:customStyle="{ background: '#0A993B', borderColor: '#0A993B', color: '#fff' }">查询</u-button>
				<u-button size="small" @click="handleReset">重置</u-button>
			</view>
		</view>
		<!-- 列表 -->
		<scroll-view class="c content-scroll" scroll-y="true">
			<view class="card" v-for="(item, index) in filteredList" :key="item.id || index">
				<view class="card-hd">
					<view class="title">{{ item.name }}</view>
					<view :class="['status', 'status-pass']">
						{{ statusText(item.checkStatus) }}
					</view>
				</view>
				<view class="field"><text class="key">机构名称:</text><text class="val">{{ item.organizationName }}</text>
				</view>
				<view class="field"><text class="key">手机号:</text><text class="val">{{ item.phoneNumber }}</text></view>
				<view class="field"><text class="key">地址:</text><text class="val">{{ item.region }}</text></view>
				<view class="field"><text class="key">组织机构代码:</text><text class="val">{{ item.ext5 }}</text></view>
				<view class="field"><text class="key">所属行政区:</text><text class="val">{{ item.region }}</text></view>
				<view class="field"><text class="key">注册时间:</text><text class="val">{{ item.createTime }}</text>
				</view>
				<view class="field"><text class="key">审核时间:</text><text class="val">{{ item.checkOkTime }}</text></view>
				<view class="ops">
					<u-button size="small" @click="gopage(item.id)">查看</u-button>
					<u-button size="small" type="error" plain @click="remove(item)"
						:customStyle="{ border: '1rpx solid #0A993B', borderColor: '#0A993B', color: '#0A993B' }">删除</u-button>
				</view>
			</view>
		</scroll-view>

		<!-- 选择器 -->
		<u-picker :show="showRegionPicker" :columns="[regionOptions]" @confirm="onRegionConfirm"
			@cancel="showRegionPicker = false" @close="showRegionPicker = false" />
		<u-picker :show="showStatusPicker" :columns="[statusOptions.map(s => s.label)]" @confirm="onStatusConfirm"
			@cancel="showStatusPicker = false" @close="showStatusPicker = false" />
	</view>
</template>

<script>
import {
	jcjglist
} from '@/api/sylin/index.js'
import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			// 查询条件
			query: {
				keyword: '',
				region: '', // 文本
				status: '' // '', 'pass','pending','reject'
			},
			showRegionPicker: false,
			showStatusPicker: false,
			regionOptions: ['全部', '山东省/济南市/历下区', '山东省/青岛市/市南区'],
			statusOptions: [{
				value: '',
				label: '全部'
			},
			{
				value: 'pass',
				label: '已通过'
			},
			{
				value: 'pending',
				label: '未审核'
			},
			{
				value: 'reject',
				label: '不通过'
			}
			],
			// 演示数据
			list: []
		}
	},
	computed: {
		filteredList() {
			return this.list.filter(it => {
				const kw = this.query.keyword && this.query.keyword.trim()
				if (kw) {
					const hit = (it.name + it.orgCode + it.orgId).toLowerCase().includes(kw.toLowerCase())
					if (!hit) return false
				}
				if (this.query.region && this.query.region !== '全部') {
					if (it.region !== this.query.region) return false
				}
				if (this.query.status) {
					if (it.status !== this.query.status) return false
				}
				return true
			})
		}
	},
	onLoad() {
		this.getjcjglist()
	},
	methods: {
		async getjcjglist() {
			const res = await jcjglist({
				pageNum: 1,
				pageSize: 99999
			})
			console.log(res)
			this.list = res.rows
		},
		gopage(id) {
			uni.navigateTo({
				url: `/pages/workbench/01task/jiancejigouDetail?id=${id}`
			})
		},
		onRegionConfirm(e) {
			this.query.region = e.value[0];
			this.showRegionPicker = false
		},
		onStatusConfirm(e) {
			const label = e.value[0];
			const item = this.statusOptions.find(s => s.label === label);
			this.query.status = item ? item.value : '';
			this.showStatusPicker = false
		},
		handleSearch() {
			/* 由 computed 过滤，无需额外处理 */
		},
		handleReset() {
			this.query = {
				keyword: '',
				region: '',
				status: ''
			}
		},
		remove(item) {
			uni.showModal({
				title: '提示',
				content: '确定删除该机构吗？',
				success: (res) => {
					if (res.confirm) {
						this.list = this.list.filter(it => it.id !== item.id)
					}
				}
			})
		},
		statusText(v) {
			if (v == '0') return '进行中'
			if (v == '1') return '成功'
		}
	}
}
</script>

<style lang="scss" scoped>
/* 顶部筛选区域 */
.filter-box {
	position: relative;
	z-index: 1;
	background: #fff;
	padding: 20rpx;

	.row {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.row-item {
		flex: 1;
		background: #f7f7f7;
		border-radius: 12rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.label {
		color: #666;
		font-size: 26rpx;
	}

	.value {
		color: #333;
		font-size: 26rpx;
	}

	.btn-row {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;
	}
}

.content-scroll {
	height: calc(100vh - 320rpx);
}

.c {
	position: relative;
	z-index: 1;
	padding: 20rpx;
}

.card {
	background: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
}

.card-hd {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.title {
	font-weight: 700;
	font-size: 30rpx;
}

.status {
	padding: 6rpx 16rpx;
	border-radius: 24rpx;
	font-size: 24rpx;
	color: #fff;
}

.status-pass {
	background: #29a74d;
}

.status-pending {
	background: #7db1ff;
}

.status-reject {
	background: #ff4d4f;
}

.field {
	display: flex;
	margin-top: 10rpx;
	text-align: right;
}

.key {
	color: #999;
	width: 200rpx;
	margin-right: 20rpx;
}

.val {
	color: #333;
}

.ops {
	display: flex;
	gap: 20rpx;
	margin-top: 16rpx;
	justify-content: flex-end;
}

.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;

	z-index: 2;
}
</style>